<template>
  <div>
    <div id="smallPie" ref="smallPie" style="height:200px;margin-bottom:16px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'SmallPie',
  data () {
    return {
      mychart: {},
      option: {}
    }
  },
  mounted () {
    this.initChart()
    window.addEventListener('resize', () => {
      setTimeout(() => {
        this.mychart.resize()
      }, 500)
    })
  },
  methods: {
    initChart () {
      this.mychart = echarts.init(this.$refs.smallPie)

      var m2R2Data = [
        { value: 1456, legendname: '16℃以下', itemStyle: { color: '#8d7fec' } },
        { value: 895, legendname: '16-18℃', itemStyle: { color: '#5085f2' } },
        { value: 369, legendname: '18-20℃', itemStyle: { color: '#e75fc3' } },
        { value: 213, legendname: '20℃以上', itemStyle: { color: '#f87be2' } }
      ]

      this.option = {
        tooltip: {
          trigger: 'item',
          formatter: function (parms) {
            var str =
              parms.seriesName +
              '</br>' +
              parms.marker +
              '' +
              parms.data.legendname +
              '</br>' +
              '数量：' +
              parms.data.value +
              '</br>' +
              '占比：' +
              parms.percent +
              '%'
            return str
          }
        },
        series: [
          {
            name: '标题',
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['30%', '62%'],
            clockwise: false, // 饼图的扇区是否是顺时针排布
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: 'outter',
                formatter: function (parms) {
                  return parms.data.legendname
                }
              }
            },
            labelLine: {
              normal: {
                length: 5,
                length2: 3,
                smooth: true
              }
            },
            data: m2R2Data
          }
        ]
      }
      this.mychart.setOption(this.option)
    }
  }
}
</script>

<style lang="less" scoped></style>
